<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/vant.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
		<script src="html5plus://ready"></script>
	</head>
	<body>
		<div id="app">
			<header>
				<van-row>
					<van-col span="21" style="height: 50px;">
						<van-search background="red" placeholder="请输入搜索关键词" v-model="value" />
					</van-col>
					<van-col span="3" style="height: 54px; background-color: red;">
						<van-icon style="margin-top: 13px;margin-right: 20px;" size="30px" name="chat-o" color="white"></van-icon>
					</van-col>
				</van-row>
			</header>
			<section>
				<van-swipe :autoplay="3000" indicator-color="white">
					<van-swipe-item v-for="item in CarouselFigureList">
						<img :src="item.ImageUrl" style="width: 100%;" />
					</van-swipe-item>
				</van-swipe>

				<van-row style=" margin-top: 25px;margin-bottom: 25px;">
					<van-col span="4" style="margin-left: 20px; font-size: 14px;"><img src="../img/min.PNG" />酒水饮料</van-col>
					<van-col span="4" style="margin-left: 20px; font-size: 14px;"><img src="../img/min1.PNG" />厨房用品</van-col>

				</van-row>
				<div style="width: 100%;height:50px;background-color: gainsboro;padding-top: 10px;" align="center">
					<div style="width: 95%;height:40px;background-color: ghostwhite;border-radius: 25px 25px 25px 25px;">
						<van-row style="padding: 8px;">
							<van-col span="3" style="color: red">资讯</van-col>
							<van-col span="18">
								<van-swipe :autoplay="1500" show-indicator=false>
									<van-swipe-item v-for="InformationList in InformationList">
										{{InformationList.Title}}
									</van-swipe-item>
									<div class="custom-indicator" slot="indicator"></div>
								</van-swipe>
							</van-col>
							<van-col span="3">更多</van-col>
						</van-row>
					</div>
				</div>
				<van-row style="margin-top: 20px;margin-bottom:20px;font-size: 24px;">
					<van-col>
						<a href="" style="border-left:solid red 2px ;margin-left: 5px;">热门推荐</a>
					</van-col>
				</van-row>

				<van-row gutter="18">
					<van-col span="8" style="margin-left: 5px;" v-for="its in GoodsRecommendList">
						<img v-lazy="its.GoodsImageUrl.src" style="width: 100%;" />
					</van-col>

				</van-row>
				<van-row gutter="18">
					<van-col span="8" style="margin-left: 5px; font-size: 24px; color: #FF0000;">￥0.01</van-col>

				</van-row>
				<van-row style="padding-top: 10px;padding-bottom:10px;">
					<van-col span="24"><a href="" style="font-size: 24px; border-left:solid red 2px ; margin-left: 5px;">商品列表</a></van-col>
				</van-row>
				<!--首页参数传到商品详情  -->
				<van-row style="margin-top: 20px;" v-for="(item,index) in Data">
					<van-col span="24">
						<van-card @click="liebiao(item)" :num="item.count" :price="item.RealPrice" :title="item.Name" lazy-load="true"
						 :thumb="item.GoodsImageUrl.src" :origin-price="item.MarketPrice" />
						<span slot="footer">
							<label>累计销量{{item.VirtualSaleCount}}</label>&nbsp;&nbsp;&nbsp;
							<label>{{item.BrowseCount}}次销量</label>
						</span>
					</van-col>
				</van-row>



			</section>
			<p style="text-align: center; color: darkgrey;">暂无商品加载.....</p>

		</div>
		<script>
			Vue.use(VueLazyload, {
				error: '../img/mai5.jpg',
			});

			var vm = new Vue({
				el: "#app",
				data: {
					active: 0,
					value: "",

					CarouselFigureList: [

					],
					InformationList: [

					],
					GoodsRecommendList: [],
					Data: [

					]



				},
				methods: {
					lunbo: function() {
						var _this = this;
						ajax({
							url: "http://dsapi.ysd3g.com/api/IndexData",
							dataType: "jsonp",
							success: function(res) {
								_this.InformationList = res.Data.InformationList;
								_this.CarouselFigureList = res.Data.CarouselFigureList;
								_this.GoodsRecommendList = res.Data.GoodsRecommendList;

							}
						})
					},
					list: function() {
						var _this = this;
						ajax({
							url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
							dataType: "jsonp",
							"success": function(res) {
								vm.Data = res.Data;

							}
						})
					},
					// 首页跳转商品详情点击跳转页面
					liebiao: function(item) {
						// console.log(item)
						plus.webview.create("Windex.html", "Windex", {}, {
							lisprice: item.RealPrice,
							lisname: item.Name,
							liscount: item.VirtualSaleCount,
							BrowseCount: item.BrowseCount,
							nId: item.Id
						})
						plus.webview.show("Windex");
					}

				},
				created: function() {
					this.lunbo();
					this.list();

				}

			})
		</script>
	</body>
</html>
